<template>
    <div>
      <h1>{{ message }}</h1>
      <p>{{ computedMessage }}</p>
      <button @click="updateMessage">Update Message</button>
      <input v-model="inputValue" placeholder="Type something" />
      <p>Input Value: {{ inputValue }}</p>
    </div>
  </template>
  
  <script>
  import { ref, computed } from 'vue';
  
  export default {
    setup() {
      // 响应式数据
      const message = ref('Hello from Vue 3!');
      const inputValue = ref('');
  
      // 计算属性
      const computedMessage = computed(() => {
        return message.value + ' (computed)';
      });
  
      // 方法
      const updateMessage = () => {
        message.value = 'Message updated!';
      };
  
      // 返回对象，模板中可以直接使用这些属性和方法
      return {
        message,
        computedMessage,
        updateMessage,
        inputValue
      };
    }
  };
  </script>
  
  <style scoped>
  /* Your styles here */
  </style>